<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
    font-family: Arial, sans-serif;
    background-image: linear-gradient(to right, #6a11cb, #2575fc);
}

.container {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.8);
}

h1 {
    text-align: center;
    color: #444;
}

label {
    display: inline-block;
    width: 80px;
    text-align: right;
}

input {
    width: 180px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 5px;
    background-color: #2575fc;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #6a11cb;
}

a {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #2575fc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

    </style>
</head>
<body>
    <div class="container">
        <h1>用户管理</h1>
        <form id="loginForm">
            <label for="username">用户名：</label>
            <input type="text" id="username" required>
            <br>
            <label for="password">密码：</label>
            <input type="password" id="password" required>
            <br>
            <button type="submit">登录</button>
        </form>
        <a href="#">注册</a>
        <a href="#">忘记密码</a>
    </div>
    <script src="scripts.js"></script>
</body>
<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;

    // 发送请求到服务器验证
    fetch('/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${username}&password=${password}`
    })
        .then(response => response.text())
        .then(result => {
            if (result === '登录成功') {
                window.location.href = 'http://127.0.0.1/qimo2';
            } else {
                alert(result);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
});


</script>
</html>
